<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="http://1.xinli2017.applinzi.com/weixin/js/jquery.min.js"></script>
</head>
    <style type="text/css">
          html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header,
        menu, nav, output, section, summary,
        time, mark, audio, video, input {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-weight: normal;
        vertical-align: baseline;
        list-style: none
        }
        body{
          background: #efeff4 ;
          box-sizing: border-box;
        }
         .triangle-facing-left {  
           display: inline-block;
          border-left: 2px solid;
          border-bottom: 2px solid;
          width: 12px;
          height: 12px;
          transform: rotate(45deg);
          margin-top: 12px;
         }  
        .header_title_fonts{
        font-size: 12px;
        color: #666; 
        }
        .header{
        height: 44px;
        width: 100%;
        position: fixed;
        line-height: 44px;
        display: flex;
        z-index: 44;
        background: #fff
        }
        .back{
        height: 44px;
        width: 44px;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        line-height: 44px;
        color: #1485f4;
        }
        .header_title{
        font-size: 18px;
        text-align: center;
        width: 100%;
        line-height: 44px;
        }
        .wrapper{
          padding-top: 44px;

        }
        .hgweb_box{
          background: #fff;
          padding: 10px 15px;
          margin-top:1px;
        }
       .hgweb_amount{
          padding: 10px 0 20px 0;
          border-bottom: .5px solid #ddd;
          text-align: center;
        }
        .amount_title{
          line-height:30px;
          font-size: 16px;
        }
        .amount{
          font-size: 26px;
          line-height: 44px;
        }
        .order_list{
          /*border-bottom: .5px solid #ddd;*/
          padding: 8px 10px;
        }
        .order_list_item{
          line-height: 28px;
          font-size: 14px;
          color: #666;
          display: flex;
        }
        .order_item_left{
          width: 30%;
        }
        .order_item_right{
          width: 70%;
          text-align: right;
        }
        .primary_button{
          line-height: 40px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          background: #1485f4;
          border-radius: 5px;
          margin:20px 0;

        }
    </style>
<body>
     <header class="header ">
        <div class="back" id="back">
            <span class=" triangle-facing-left" ></span>
        </div>
        <h1 class="header_title">支付订单</h1>
     </header>
     <div class="wrapper">
       <div class="hgweb_box">
        <div class="hgweb_amount">
            <div class="amount_title">订单金额</div>
            <div class="amount" th:text="${amount}">元</div>
        </div>
          <ul class="order_list">
              <li class="order_list_item">
                  <div class="order_item_left">商品</div>
                  <div class="order_item_right"   th:text="${orderDesc}">最强王者</div>
              </li> 
              <li class="order_list_item">
                  <div class="order_item_left">交易时间</div>
                  <div class="order_item_right" id="date"></div>
              </li>
              <li class="order_list_item">
                  <div class="order_item_left">支付方式</div>
                  <div class="order_item_right">银行卡</div>
              </li>
              <li class="order_list_item">
                  <div class="order_item_left">交易单号</div>
                  <div class="order_item_right" th:text="${MerOrderNo}" >211</div>
              </li>
          </ul>
          <div>
             <form name="myform" id="pay_form" method="POST"  action="https://payment.chinapay.com/CTITS/service/rest/page/nref/000000000017/0/0/0/0/0" >
                <input type="hidden" name="Version" th:value="${Version}"  />
                <input type="hidden" name="MerId" th:value="${MerId}"   />
                <input type="hidden" name="MerOrderNo" th:value="${MerOrderNo}"  />
                <input type="hidden" name="TranDate" th:value="${TranDate}"  />
                <input type="hidden" name="TranTime" th:value="${TranTime}" />
                <input type="hidden" name="OrderAmt" th:value="${OrderAmt}"   />
               <!--  <input type="hidden" name="TranType" th:value="${TranType}"   /> -->
                <input type="hidden" name="BusiType" th:value="${BusiType}"  />
                <input type="hidden" name="MerBgUrl" th:value="${MerBgUrl}"   />
                <input type="hidden" name="RemoteAddr" th:value="${RemoteAddr}"   />
                <input type="hidden" name="Signature" th:value="${Signature}"  />
             </form>
               <div class="primary_button" id="btn">确定</div>
          </div>
      </div>
     </div>
</body>
<script type="text/javascript">
    $(function () {
       var date = new Date();
          var seperator1 = "-";
          var seperator2 = ":";
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
              month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
              strDate = "0" + strDate;
          }
          var currentdate=date.getFullYear() + seperator1 + month + seperator1 + strDate
                  + " " + date.getHours() + seperator2 + date.getMinutes()
                  + seperator2 + date.getSeconds()
          console.log(currentdate)
          $("#date").text(currentdate)
      $("#back").click(function () {
          try{
                window.android.invokeMethod(1,["true"])
            }catch(e){
                console.log(e)
            }
      })
      $("#btn").click(function () {
      		$("#btn").attr("disabled", "disabled");
          $("#btn").css({background:'#999'})
          $("#btn")[0].innerText="正在加载中..."
          $('#pay_form').submit();
      })
    })
</script>
</html>